<template>
  <div class="actiRe">
    <div class="actiRe_main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in list" :key="index">
        <img :src="item">
        </van-swipe-item>
      </van-swipe>
      <!-- <img src="@/assets/img/swiper/0.jpg"> -->
    </div>
    <div class="actiRe_recom">
      <div class="actiRe_recom_first">
        <img src="https://school-serve.oss-cn-chengdu.aliyuncs.com/upload/20220406/97b50fd1-edea-41a4-8892-9f4dcd2f8a5e25989.png">
      </div>
      <div class="actiRe_recom_first">
        <img src="https://school-serve.oss-cn-chengdu.aliyuncs.com/upload/20220406/ecb12610-9b43-411a-85da-a1783b4450bc04361.png">
      </div>

    </div>
  </div>
</template>
<script>
import {SlideShow} from '@/api/home'
export default {
  data(){
    return {
      list:[]
    }
  },
   created(){
         // 获取轮播图
    SlideShow().then(res => {
      let list = res.data.list;
      if(list.length){
        for(let i=0;i<res.data.list.length;i++){
          let ans;
          ans = list[i].host + "/" +  list[i].relative_path;
          this.list.push(ans);
        }
      }
    })
   },
  methods:{
  }
}
</script>

<style lang="less">
.actiRe{
  margin: 30px auto;
  width: 90%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .actiRe_main{
    width: 55%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    background-color: rgb(245, 245, 245);
     .my-swipe .van-swipe-item {
       img {
         width: 100%;
         height: 53.33333vw;
         color: #fff;
          font-size: 20px;
          line-height: 53.33333vw;
          text-align: center;
          background-color: #39a9ed;
          border-radius: 15px;
       }
    
  }
  }
  .actiRe_recom{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .actiRe_recom_first{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 48%;
      border-radius: 15px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
      // margin-top: 20px;
      // margin: 15px auto;
      img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>